<template>
  <div class="box">
    <header class="set-header">
      <router-link tag="span" :class="item.icon" :to="item.path" v-for="(item, index) of list" :key="index"></router-link>
      <span>评价</span>
    </header>
    <div class="set-content">
      <ul class="set-content-ul">
        <li>
          <div class="set-content-ul-pro">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload } from 'mint-ui'
Vue.use(Swipe, SwipeItem, Lazyload)
export default {
  data () {
    return {
      list: [
        {
          path: '/order',
          icon: 'iconfont icon-fanhui2'
        }
      ],
      setlist: [
        {
          path: '/set',
          pdesc: '待收货',
          icon: 'iconfont icon-trues'
        }
      ]
    }
  },
  computed: {
  },
  created () {
  }
}
</script>
<style lang="scss">
// 头部
.set-header{
  width:3.75rem;
  height:0.42rem;
  line-height:0.42rem;
  background:#F9F9F9;
  text-align: center;
  span{
    &:nth-child(1){
     font-size:0.16rem;
     float:left;
     font-weight: 700;
     margin-left:0.15rem;
    };
    &:nth-child(2){
      display:block;
      font-size:0.14rem;
      float:left;
       margin-left:1.3rem;
    }
  }
}
// 商品展示部分
.set-content{
  overflow-y:scroll;
  flex:1;
  .set-content-ul{
      width:3.75rem;
      flex:1;
      background:0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width:100%;
        height:1.5rem;
        box-sizing: border-box;
        display: flex;
        background:cadetblue;
        border-bottom:1px solid #ccc;
        .set-content-ul-pro{
          width:100%;
          height:1.5rem;
        }
      }
    }
  }
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: all 1s;
}
.slide-enter-to, .slide-leave {
  transform: translateX(0%);
}
.slide-leave-active {
  transition: all 0s;
}
</style>
